<template>
	<div class="app-container" style="height: calc(100vh - 105px);overflow:hidden">
		<div class="edit" style="overflow: hidden;">
			<!--      <div class="header">
        <h2>执勤编班系统</h2>
        <p class="date">{{ date }} {{ week }}</p>
      </div> -->
			<div class="user_list">
				<h3>待编班信息</h3>
				<div class="user_list_info">
					<el-tag>总人数：{{ armed_num.count }}</el-tag>
					<el-tag>排长：{{ armed_num.fc_soldier }}</el-tag>
					<el-tag>班长：{{ armed_num.private_arm }}</el-tag>
					<el-tag>士兵：{{ armed_num.sergeant }}</el-tag>
				</div>

				<div class="list_header">
					<el-row>
						<el-col :span="2"><div class="grid-content">编号</div></el-col>
						<el-col :span="3"><div class="grid-content">姓名</div></el-col>
						<el-col :span="3"><div class="grid-content">性别</div></el-col>
						<el-col :span="4"><div class="grid-content">入伍时间</div></el-col>
						<el-col :span="3"><div class="grid-content">军衔</div></el-col>
						<el-col :span="3"><div class="grid-content">职务</div></el-col>
						<el-col :span="2"><div class="grid-content">籍贯</div></el-col>
						<el-col :span="4"><div class="grid-content">能力</div></el-col>
					</el-row>
				</div>

				<draggable
					class="list-group"
					style="overflow: scroll;height: calc(100vh - 195px); padding-bottom: 30px;"
					:list="armed_data"
					:group="{ name: 'people', pull: pullFunction }"
					@start="start"
					@change="log"
				>
					<el-row v-for="(item, index) in armed_data" :key="index">
						<el-col :span="2">
							<div class="grid-content">{{ item.id || item['编号'] }}</div>
						</el-col>
						<el-col :span="3">
							<div class="grid-content">{{ item.name }}</div>
						</el-col>
						<el-col :span="3">
							<div class="grid-content">{{ item.sex | updateSex }}</div>
						</el-col>
						<el-col :span="4">
							<div class="grid-content">{{ item.joinUpDate | updateJoinDate }}</div>
						</el-col>
						<el-col :span="3">
							<div class="grid-content">{{ item.policeRank | updatepoliceRank }}</div>
						</el-col>
						<el-col :span="3"><div class="grid-content"></div></el-col>
						<el-col :span="3">
							<div class="grid-content">{{ item.nativePlace }}</div>
						</el-col>

						<el-col :span="5"><div class="grid-content"></div></el-col>
					</el-row>
				</draggable>
			</div>

			<div class="main">
				<div style="overflow: hidden">
					<!-- 				<div class="item" style="width: 50%;float: left;">
						<label class="el-form-item__label" style="width: 80px;">包班配比</label>
						<el-select @change="range_change" :value="range" placeholder="请选择包班配比">
							<el-option v-for="item in range_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div> -->
					<!-- 					<div class="item" style="width: 50%;float: left;">
						<label class="el-form-item__label" style="width: 80px;">跳岗时段</label>
						<el-select @change="jump_time_change" :value="jump_time" placeholder="请选择跳岗时段">
							<el-option v-for="item in jump_time_arr" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div> -->
				</div>

				<div class="item">
					<div class="item_inner">
						<div style="width: 50%;float: left;">
							<label style="width: 150px; text-align: left;" class="el-form-item__label" for="">选择上哨时长(分钟)</label>
							<el-select :value="limit_time" placeholder="请选择" @change="arrangeLimitChange">
								<el-option v-for="item2 in limit_arr" :value="item2.value" :label="item2.label"></el-option>
							</el-select>
						</div>
						<div style="width: 50%;float: left;">
							<label style="width: 150px; text-align: left;" class="el-form-item__label" for="">选择闭哨时间段</label>
							<el-select multiple collapse-tags v-model="disable_time" placeholder="请选择">
								<el-option v-for="item2 in disable_time_arr" :label="item2.label" :value="item2.value"></el-option>
							</el-select>
						</div>
					</div>

					<div class="item_inner">
					<div style="width: 50%;float: left;">
							<label style="width: 150px; text-align: left;" class="el-form-item__label">选择跳哨时段</label>
							<el-select v-model="jump_time" placeholder="请选择">
								<el-option v-for="item2 in jump_time_arr" :value="item2.value" :label="item2.label"></el-option>
							</el-select>
						</div>
						<div style="width: 50%;float: left;">
							<label class="el-form-item__label" style="width: 150px; text-align: left;">选择排班时间(周)</label>
							<el-date-picker
								style="width: 300px;"
								v-model="week_value"
								type="week"
								format="yyyy 第 WW 周 (MM月dd日开始)"
								placeholder="选择周"
								ref="week"
								@change="weekTap"
							></el-date-picker>
						</div>
					</div>
				</div>

				<div class="item clearfix" style=" width: calc(100% - 100px);">
					<label class="el-form-item__label" style="width: 140px;">应急班、替补人员</label>
					<el-switch v-model="emer" style="margin-top: 8px;" active-color="#13ce66" inactive-color="#ccc"></el-switch>
					<el-button type="primary" class="create_btn" @click="create_table">上传排班</el-button>
				</div>
				<!--  排班  -->
				<div class="arrange" v-if="arrange.length">
					<div v-for="(item, index) in arrange" :key="index" class="arrange_item">
						<el-card shadow="always">
							<div class="config">
								<h4>{{ item.title }}</h4>
							</div>

							<draggable class="list-group" :list="item.list" :group="{ name: 'people', pull: pullFunction }" @start="start" @change="log($event, index)" sort="true">
								<el-row v-for="(item2, index2) in item.list" :key="item2.name">
									<el-col :span="8">
										<div class="grid-content">第{{ index2 + 1 }}组</div>
									</el-col>
									<el-col :span="8">
										<div class="grid-content">{{ item2.name }}</div>
									</el-col>
									<el-col :span="8">
										<div class="grid-content">{{ item2.policeRank | updatepoliceRank }}</div>
									</el-col>
								</el-row>

								<div class="empty" v-if="item.list.length == 0">将左侧列表拖拽到这里即可添加</div>
							</draggable>
						</el-card>
					</div>

					<div class="arrange_item" v-if="emer">
						<el-card shadow="always">
							<h4>应急班</h4>

							<draggable class="list-group" :list="emer_list" :group="{ name: 'people', pull: pullFunction }" @start="start" @change="log" sort="true">
								<el-row v-for="(item2, index2) in emer_list" :key="item2.name">
									<!-- 		<el-col :span="8">
          					<div class="grid-content">{{ index2 + 1 }}</div>
          				</el-col> -->
									<el-col :span="12">
										<div class="grid-content">{{ item2.name }}</div>
									</el-col>
									<el-col :span="12">
										<div class="grid-content">{{ item2.rank }}</div>
									</el-col>
								</el-row>

								<div class="empty" v-if="emer_list.length == 0" style="color:#409EFF">按着ctrl拖拽左侧列表可以实现复制</div>
							</draggable>
						</el-card>
					</div>

					<div class="arrange_item" v-if="emer">
						<el-card shadow="always">
							<h4>替补人员</h4>

							<draggable class="list-group" :list="substitute" :group="{ name: 'people', pull: pullFunction }" @start="start" @change="log" sort="true">
								<el-row v-for="(item2, index2) in substitute" :key="item2.name">
									<!-- 		<el-col :span="8">
          					<div class="grid-content">{{ index2 + 1 }}</div>
          				</el-col> -->
									<el-col :span="12">
										<div class="grid-content">{{ item2.name }}</div>
									</el-col>
									<el-col :span="12">
										<div class="grid-content">{{ item2.rank }}</div>
									</el-col>
								</el-row>

								<div class="empty" v-if="emer_list.length == 0" style="color:#409EFF">按着ctrl拖拽左侧列表可以实现复制</div>
							</draggable>
						</el-card>
					</div>
				</div>

				<div class="created_tables" v-if="table_show">
					<!--
          <div>
          	<el-button @click="show_data=true">预览排班表</el-button>
          </div> -->
					<div><h2 class="title">每日排班表</h2></div>

					<div v-for="(item, i) in day_arr" :key="i" class="create_item">
						<div>
							<h3 class="title">{{ week_arr[i] }}</h3>
							<div class="export-excel-wrapper" style="float: right;margin-bottom: 10px;">
								<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
								<el-button type="primary" size="small" @click="tableToExcel(i, week_arr[i] + '.xls')">导出EXCEL</el-button>
							</div>

							<el-button size="small" style="float: right; margin: 0 10px;" type="primary" @click="print('print_week_arr' + i)">打印</el-button>
						</div>

						<div class="print_class_table" :id="['print_week_arr' + i]">
							<h2 class="title">执勤编班表</h2>
							<div class="sub">
								<span class="sub_name">作战勤务值班员:</span>
								<span class="sub_date">月 日 星期</span>
							</div>

							<table width="100%" border="1" cellspacing="0" :ref="['ref_download' + i]" style="border-color: #eee;">
								<thead>
									<tr width="100%">
										<th width="12.5%" rowspan="2" colspan="2">时间</th>
										<th :colspan="sentryTags_only.length">哨兵</th>
										<th width="12.5%" rowspan="2">应急小组</th>
									</tr>
									<tr>
										<th v-for="(item, index) in sentryTags_only" :key="index" :width="[75 / sentryTags_only.length + '%']">{{ item }}</th>
									</tr>
								</thead>

								<tbody>
									<!-- :prop="item" :label="item" :key="item" -->
									<tr v-for="(item, index) in day_arr[i]" :key="index">
										<td colspan="2">{{ item['时间段'] }}</td>
										<td v-for="index2 in sentryTags_only.length" :key="index2">{{ item[sentryTags_only[index2 - 1]] }}</td>

										<td rowspan="5" v-if="item['时间段'] == '22-24'"></td>
										<td rowspan="2" v-if="item['时间段'] == '8-10'"></td>
										<td rowspan="3" v-if="item['时间段'] == '12-14'"></td>
										<td rowspan="2" v-if="item['时间段'] == '18-20'"></td>
									</tr>

									<tr>
										<td colspan="2">应急班人员</td>
										<td :colspan="sentryTags_only.length + 1">{{ emer_list_person }}</td>
									</tr>
									<tr>
										<td colspan="2">替补人员</td>
										<td :colspan="sentryTags_only.length + 1">{{ substitute_person }}</td>
									</tr>

									<tr>
										<td rowspan="2" width="6.25%">
											<span style="font-weight: bold;display: flex;justify-content: space-around;">查寝</span>
											<span style="font-weight: bold;display: flex;justify-content: space-around;">计划</span>
										</td>
										<td width="6.25%">时段</td>
										<td colspan="2">午夜前(22:00-24:00)</td>
										<td colspan="2">午夜后(0:00-5:00)</td>
										<td colspan="2">午休(12:30-14:50)</td>
										<td :colspan="sentryTags_only.length - 5">其他时间</td>
									</tr>
									<tr>
										<td width="6.25%">人员</td>
										<td colspan="2"></td>
										<td colspan="2"></td>
										<td colspan="2"></td>
										<td :colspan="sentryTags_only.length - 5"></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { listPerson, getPerson, delPerson, addPerson, updatePerson, exportPerson } from '@/api/tranShort/person';
import { listSentryPost } from '@/api/tranShort/sentryPost';

import { addSchedulingTask } from '@/api/tranShort/schedulingTask';
import armed_data from '@/assets/data.json';
import draggable from '@/vuedraggable';
import dayjs from 'dayjs';
import printJS from 'print-js';
import XLSX from 'xlsx';
import _ from 'lodash';
let week_arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//base64转码
var base64 = function(s) {
	return window.btoa(unescape(encodeURIComponent(s)));
};
//替换table数据和worksheet名字
var format = function(s, c) {
	return s.replace(/{(\w+)}/g, function(m, p) {
		return c[p];
	});
};

function format_date(val) {
	return val >= 10 ? val : '0' + val;
}

function get_time_arr(e) {
	//  e是每次递增的分钟数  也及时一班哨多久
	let num = 0;
	let arr = [];
	let index = 0;
	while (num < 1440) {
		let start = num;
		let end = num + e;

		arr.push({
			start,
			end,
			value: index,
			label: m2h(start) + '-' + m2h(end)
		});
		index++;
		num = end;
	}
	return arr;
}

function m2h(val) {
	return ~~(val / 60) + ':' + (val % 60);
}

export default {
	name: 'Home',
	order: 1,
	components: {
		draggable
	},
	data() {
		let now = new Date();
		let day = now.getDay();
		if (day == 0) day = 7;

		let week_value = now.setDate(now.getDate() + (8 - day));
		return {
			armed_data: [],
			// range: '',
			// range_options: [],
			sentryTags: [], //哨位列表
			// inputVisible: false,
			// add_sentry_value: '', //新增的数据
			table_show: false,
			person_arr: [], //人员编组表数据
			arrange_result: [],
			person_arr_fields: [],
			day_arr: [],
			week_arr: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
			jump_time_arr: [
				{
					value: 0,
					label: '第一班'
				},
				{
					value: 1,
					label: '第二班'
				},
				{
					value: -1,
					label: '不跳岗'
				}
			],
			jump_time: -1,
			emer: false, // 应急
			emer_list: [],
			substitute: [],
			controlOnStart: true,
			fileTemp: '', //excel上传
			tableData: [],
			file: {},
			sentryTags_only: [],
			// show_data: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 20,
				name: null,
				sex: null,
				joinUpDate: null,
				policeRank: null,
				wristbandDeviceId: null
			},
			// 总条数
			total: 0,
			// 警衔字典
			policeRankOptions: [],
			arrange: [],
			limit_arr: [{
				label:60,
				value:60
			},
			{
				label:80,
				value:80
			},
			{
				label:90,
				value:90
			},{
				label:120,
				value:120
			},{
				label:160,
				value:160
			},{
				label:180,
				value:180
			},{
				label:240,
				value:240
			}],
			limit_time: 120,
			disable_time: '',
			disable_time_arr: [], //排除掉的
			week_value
		};
	},
	created() {
		this.getList();
		// this.getDicts("sys_user_sex").then(response => {
		//   this.sexOptions = response.data;
		// });
		this.getDicts('police_rank').then(response => {
			this.policeRankOptions = response.data;
			console.log(this.policeRankOptions);
		});
		this.disable_time_arr = get_time_arr(this.limit_time);
	},
	mounted() {
		this.get_sentryTags();
	},
	filters: {
		updatepoliceRank(val) {
			if (val == 1) {
				return '排长';
			} else if (val == 2) {
				return '班长';
			} else if (val == 3) {
				return '士兵';
			}
		},
		updateSex(val) {
			if (val == 0) {
				return '男';
			} else if (val == 1) {
				return '女';
			}
		},
		updateJoinDate(val) {
			return val.replace(/-/g, '/');
		},
		formatDate(numb, format = '/') {
			if (!numb) return '无';
			let num = (numb + '').slice(0, 4) - 0;
			if (num > 1980 && num < 2040) {
				return numb;
			}

			const time = new Date((numb - 1) * 24 * 3600000 + 1);
			time.setYear(time.getFullYear() - 70);
			const year = time.getFullYear() + '';
			const month = time.getMonth() + 1 + '';
			const date = time.getDate() - 1 + '';
			if (format && format.length === 1) {
				return year + format + month + format + date;
			}
			return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date);
		}
	},
	computed: {
		// 计算列表里分类数量
		armed_num() {
			let count = this.armed_data.length; //总数

			let private_arm = 0; //班长
			let fc_soldier = 0; //排长
			let sergeant = 0; //士兵
			for (let i = 0; i < count; i++) {
				let item = this.armed_data[i];
				if (item.policeRank == 2) private_arm++;
				if (item.policeRank == 1) fc_soldier++;
				if (item.policeRank == 3) {
					sergeant++;
				}
			}

			return {
				count,
				private_arm,
				fc_soldier,
				sergeant
				//     sergeant_1,
				//     sergeant_2,
				//     sergeant_3,
				//     sergeant_4
			};
		},
		emer_list_person() {
			return this.emer_list
				.map(v => {
					return v.name;
				})
				.join(',');
		},
		substitute_person() {
			return this.substitute
				.map(v => {
					return v.name;
				})
				.join(',');
		}
	},
	methods: {
		weekTap(e) {
			console.log(e);
		},
		// 改变稍微分钟数
		arrangeLimitChange(e, index) {
			this.limit_time = e;
			this.disable_time = '';
			this.disable_time_arr = get_time_arr(e);
		},

		//获取哨位列表
		get_sentryTags() {
			listSentryPost({
				pageNum: 1,
				pageSize: 999,
				sentryPostName: null
			}).then(response => {
				this.sentryTags = response.rows.map(v => {
					return {
						sentryPostName: v.sentryPostName,
						id: v.id
					};
				});

				this.arrange = this.sentryTags.map(v => {
					let list = [];

					let obj = {
						title: v.sentryPostName,
						list,
						id: v.id
					};
					return obj;
				});
			});
		},
		// 警衔字典翻译
		policeRankFormat(val) {
			return this.selectDictLabel(this.policeRankOptions, val);
		},
		// 获取人员列表
		getList() {
			// this.loading = true;

			listPerson(this.queryParams).then(response => {
				this.armed_data = response.rows;

				this.total = response.total;
				console.log(this.armed_data);
				// this.loading = false;
			});
		},
		tableToExcel(tableid, sheetName) {
			let html = this.$refs['ref_download' + tableid][0].outerHTML;
			var uri = 'data:application/vnd.ms-excel;base64,';
			var template =
				'<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
				'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
				'<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' +
				'</x:ExcelWorkbook></xml><![endif]-->' +
				' <style type="text/css">' +
				'table td {' +
				'border: 1px solid #999;' +
				'height: 30px;' +
				' text-align: center;' +
				' }' +
				'</style>' +
				`</head><body >

  					${html}
  					</body></html>`;
			if (!tableid.nodeType) tableid = document.getElementById(tableid);
			var ctx = {
				worksheet: sheetName || 'Worksheet',
				table: html
			};

			var aTag = document.createElement('a');
			// var blob = new Blob([ ]);
			aTag.download = sheetName;
			aTag.href = uri + base64(format(template, ctx));
			aTag.click();
			// URL.revokeObjectURL(blob);
		},

		log(e, index) {
			// console.log(e)
			this.$forceUpdate();
		},
		start({ originalEvent }) {
			this.controlOnStart = originalEvent.ctrlKey;
		},
		pullFunction() {
			return this.controlOnStart ? 'clone' : true;
		},

		get_equal(data, name) {
			let str = '';

			if (name == 'time') {
				str = '的入伍时间都是';
			}
			if (name == 'rank') {
				str = '的军衔都是';
			}
			if (name == 'place') {
				str = '的籍贯都是';
			}

			let result = _.chain(data)
				.groupBy(name)
				.toPairs()
				.map(function(currentItem) {
					return _.zipObject(['name', 'list'], currentItem);
				})
				.value();

			let res = result
				.map(v => {
					if (v.name != 'undefined' && v.list.length > 1) {
						return v.list.map(a => a.name).join() + str + v.name + '。';
					} else {
						return '';
					}
				})
				.join('');

			return res;
		},
		async create_table() {
			let { week_value, arrange, limit_time, limit_arr, disable_time, jump_time, disable_time_arr } = this;
			
			if(week_value instanceof Date){
				week_value = week_value.getTime()
			}
			if (disable_time && disable_time.length) {
				disable_time.forEach(v => {
					disable_time_arr.splice(v, 1);
				});
			}
			// disable_time_arr
			arrange = arrange.filter(v => {
				return v.list.length > 0;
			});

			let data = [];
			let schedulingDataList = [];
			let index_arr = []; // 人员索引   比如一个哨位选了5个人那么就是5包1  用这个index  去递增的遍历访问
			arrange.forEach(v => {
				index_arr.push(0);
			});
			//  星期1-7循环
			for (let i = 0; i < 7; i++) {
				let day_date = [];
				// 哨位循环
				arrange.forEach((item, $i) => {
					let prev = schedulingDataList[i - 1] && schedulingDataList[i - 1].data; //上一个
					let prev2 = schedulingDataList[i - 2] && schedulingDataList[i - 2].data; //上上一个
					let arrange_arr = [];
					//时间段循环
					disable_time_arr.forEach((v, k) => {
						let prev_id = null;
						let prev2_id = null;
						let id = item.list[index_arr[$i]].id;
						if (jump_time >= 0 && k == jump_time) {
							prev_id = prev && prev[$i][jump_time];
							prev2_id = prev2 && prev2[$i][jump_time];
						}
						if (id && (id == prev_id || id == prev2_id)) {
							index_arr[$i]++;
							if (index_arr[$i] >= item.list.length) {
								index_arr[$i] = 0;
							}
							id = item.list[index_arr[$i]].id;
						}
						arrange_arr.push(id);
						index_arr[$i]++;
						if (index_arr[$i] >= item.list.length) {
							index_arr[$i] = 0;
						}
					});
					day_date.push(arrange_arr);
				});
				// 转换一下数据

				let result = [];
				for (let i = 0; i < disable_time_arr.length; i++) {
					let _arr = [];
					for (let j = 0; j < arrange.length; j++) {
						_arr.push(day_date[j][i]);
					}
					result.push(_arr);
				}
				let date = new Date(week_value + i * 86400000);
				let obj = {
					dayOfWeek: i + 1,
					sentryPost: arrange.map(v => v.id),
					dateTime: date.getFullYear() + '-' + format_date(date.getMonth() + 1) + '-' + format_date(date.getDate()),
					timeQuantum: disable_time_arr.map(v => v.label),
					data: result
				};
				schedulingDataList.push(obj);
			}

			console.log(schedulingDataList);

			let displayValue = this.$refs.week.displayValue;

			let [schedulingName, schedulingStartTime] = displayValue.split(/\(/);

			schedulingName = schedulingName.replace(/\s+/g, '') + '[' + arrange.map(v => v.title).join() + ']排班任务';

			schedulingStartTime = new Date().getFullYear() + '-' + schedulingStartTime.replace(/(\d)([\B\D+])(\d)/, '$1-$3').replace(/[^\d-]/g, '');

			let shortScheduling = {
				schedulingName,
				schedulingStartTime
			};

			let query = { schedulingDataList, shortScheduling };
			// this.table_show = true;
			// console.log(query)
			// return
			addSchedulingTask(query).then(res => {
				if (res.code == 200) {
					this.$message.success(res.msg);
				} else {
					this.$message.error(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.header {
	width: 100%;
	height: 60px;
	color: #000;
	// background: rgba(245, 250, 253, 1.0);
	position: relative;
	// top: 60px;
	// left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99;

	h2 {
		color: #000;
	}

	.date {
		position: absolute;
		right: 20px;
		color: #000;
		bottom: 15px;
	}
}

.grid-content {
	// height: 24px;
	padding: 3px 3px;
	text-align: center;
}

.user_list {
	// position: fixed;
	// top: 60px;
	// left: 0;
	width: 500px;
	height: calc(100vh - 60px);
	float: left;

	// overflow-y: scroll;
	h3 {
		text-align: center;
		padding: 5px 0;
	}

	.user_list_info {
		padding: 3px 5px;

		span {
			margin: 5px;
		}
	}

	.list_header {
		.grid-content {
			line-height: 30px;
			height: 30px;
		}
	}
}

.el-row {
	border-bottom: 1px solid #eee;
}

.list-group {
	width: 100% !important;
	cursor: move;
}

.main {
	// width: calc(100% - 520px);
	// float: right;
	// margin-left: 500px;
	padding: 10px 0px 200px 10px;
	overflow-y: scroll;
	height: 100vh;
	.create_btn {
		position: absolute;
		right: -80px;
		top: 5px;
	}

	.item {
		position: relative;
		margin-top: 20px;
		// overflow: hidden;
		width: 100%;
	}

	.el-col {
		border-right: 1px solid #eee;
	}

	.list-group {
		border-top: 1px solid #eee;
		width: 180px;
		min-height: 80px;
	}

	.el-row {
		border-left: 1px solid #eee;
	}

	.empty {
		line-height: 20px;
		color: #9195a3;
		margin: 20px 0;
	}
}

.el-card__body {
	min-height: 240px;
	padding: 8px 20px 18px 20px !important;
}

.arrange {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 20px 0 0 0;
	overflow: hidden;
}
.arrange .limit {
	width: 80px;
	border: 1px solid #999;
	margin-left: 10px;
	height: 28px;
	line-height: 28px;
}
.arrange .limit:focus {
	border: 1px solid #999;
}

.arrange_item {
	width: calc(33% - 20px);
	min-width: 500px;
	margin-right: 20px;
	margin-bottom: 10px;
	text-align: center;

	h4 {
		margin: 12px 0;
	}

	.cell {
		width: 75px;
	}
}

.el-tag + .el-tag {
	margin-left: 10px;
	margin-top: 8px;
}

.button-new-tag {
	margin-left: 10px;

	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}

.input-new-tag {
	width: 100%;
	margin-left: 10px;
	margin-top: 8px;
	vertical-align: bottom;
}

.created_tables {
	padding: 10px 0;

	.title {
		text-align: center;
		margin: 30px 0 10px 0;
	}
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
	background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #c8c8c8;
}

.print_class_table {
	width: 1100px;
	height: 750px;
	margin: 0 auto;
	line-height: 30px;
	text-align: center;
	text-align: center;
	padding: 10px;
}

.print_class_table .title {
	letter-spacing: 26px;
	font-size: 34px;
	font-family: '宋体';
	margin: 20px 0 0 0;
}

.print_class_table .sub {
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-family: '宋体';
}

.print_class_table .sub_name {
	margin-left: 50px;
	font-size: 16px;
	color: #333;
}

.print_class_table .sub_date {
	margin-right: 50px;
	font-size: 16px;
	color: #333;
}

.print_class_table table {
	line-height: 30px;
}

.item_inner {
	overflow: hidden;
	height: 60px;
	margin-bottom: 10px;
}
</style>
